<template>
  <div class="ul_timeline" v-loading="loading" element-loading-text="加载中...">
    <el-empty description="暂无数据" v-if="total == 0" />
    <el-timeline v-else class="first_pane">
      <el-timeline-item
        class="box-card"
        v-for="(activity, index) in activeList"
        :color="color[index % 4]"
        :key="index"
        :timestamp="activity.createTime"
        placement="top"
      >
        <el-card>
          <template #header>
            <div class="card-header">
              <h4>{{ activity.empType }}</h4>
            </div>
          </template>
          <div class="c_network" :class="colorBg[index % 4]">
            {{ '【' + activity.empType + '】 ' + activity.emp }}</div
          >
          <div class="c_note">{{ activity.content }}</div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
  <el-pagination
    class="page_bo"
    hide-on-single-page
    :small="true"
    @current-change="getList"
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    layout="total, prev, pager, next"
  />
</template>
<script lang="ts" setup>
  import { ref, onMounted, toRefs } from 'vue'
  import { ElMessage } from 'element-plus'
  import { getReminderList } from '../../../../../api/order'
  const props = defineProps({
    workId: [String, Array],
  })
  const color = ['#007cff', '#a06eff', '#00c0c0', '#e69103']
  const colorBg = ['back_c4', 'back_c3', 'back_c2', 'back_c1']
  const { workId } = toRefs(props)
  const activeList = ref(null) // 催单数据
  const total = ref(0)
  let pageSize = ref(10)
  let currentPage = ref(1)
  let loading = ref(false)
  onMounted(() => {
    getList(1)
  })
  defineExpose({ getList })
  async function getList(page = 1) {
    currentPage.value = page
    let data = {
      limit: pageSize.value,
      page: page,
    }
    loading.value = true
    await getReminderList(data, workId.value).then((res) => {
      if (res.data.success) {
        activeList.value = res.data.data.rows
        total.value = Number(res.data.data.total)
      } else {
        ElMessage({
          showClose: true,
          message: res.data.message,
          type: 'error',
          duration: 4000,
        })
      }
      loading.value = false
    })
  }
</script>
<style lang="scss" scoped>
  .ul_timeline {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;

    /* IE 10+ */
    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
    }

    flex: 1;
    position: relative;
    overflow: auto;

    .first_pane {
      position: absolute;
      padding: 12px;
    }
  }

  .page_bo {
    display: flex;
    justify-content: center;
    margin-top: 12px;
    color: #999;
    font-size: 12px;
  }

  :deep(.el-tabs__item.is-active) {
    color: #007cff !important;
  }

  :deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }

  :deep(.el-tabs__nav .el-tabs__active-bar) {
    background-color: #007cff;
    padding: 0 10px;
    position: absolute;
    bottom: 0;
    left: -10px;
  }

  :deep(.el-tabs__nav .el-tabs__item:hover) {
    color: #007cff;
  }

  :deep(.el-card__header) {
    // padding: 10px 0;
    padding: 0;
    // margin: 0 10px;
    border: none;
  }

  :deep(.el-card__body) {
    padding: 0 10px;
    font-size: 12px;
  }

  :deep(.el-card) {
    &.is-always-shadow {
      box-shadow: 0px 0px 1px 2px rgba(185, 185, 185, 0.12);
    }

    border: none;
    border-radius: 0;
  }

  .box-card {
    padding-bottom: 20px;

    .c_network {
      padding: 4px 5px;
      display: inline-block;
      margin: 8px 0;
      font-size: 12px;
    }

    .back_c1 {
      background-color: #f5eee3;
      color: #e69103;
    }

    .back_c2 {
      background-color: #d2f7f7;
      color: #00c0c0;
    }

    .back_c3 {
      background-color: #eee9fa;
      color: #a06eff;
    }

    .back_c4 {
      background-color: #e4eef8;
      color: #007cff;
    }

    .c_note {
      color: #999;
      margin-bottom: 8px;
    }

    :deep(.el-timeline-item__node--normal) {
      left: 0;
    }

    :deep(.el-timeline-item__tail) {
      left: 5px;
    }

    :deep(.el-timeline-item__wrapper) {
      padding-left: 20px;
      top: -5px;
    }
  }
</style>
